<script setup>
import {
    Management,Promotion,UserFilled,User,Crop,EditPen,
    SwitchButton,CaretBottom,List,LocationFilled,Postcard,
    BellFilled,Checked,TrendCharts,Document,Notebook,Tickets,Memo
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import {ElMessage,ElMessageBox} from 'element-plus'
import {ref} from 'vue'
import {useTokenStore} from '@/stores/token.js'
const tokenstore = useTokenStore();
//导入api接口函数
import {userInfoService} from '@/api/user.js'
//使用路由，导出useRouter函数
import { useRouter } from 'vue-router';
const router = useRouter()
//导入pinia
import {useUserInfoStore} from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();
const manageuser = ref(false);
const admin = ref('用户:')
//获取个人信息
const getUserInfo =async ()=>{
    let result =await userInfoService();
    //存储pinia中
    console.log(result);
    userInfoStore.setInfo(result.data);
    console.log(userInfoStore.userinfo);
    //判断是不是管理员，只有id是1的是，从而决定是否显示用户管理
    if(result.data.id==1){
        manageuser.value = true; 
        admin.value = '管理员:'
        ElMessage.success("欢迎管理员！")
    }
    else{
        if(userInfoStore.userinfo.nickName==''||userInfoStore.userinfo.nickName==null){
            ElMessage.warning("欢迎新用户，请完善个人信息");
        } 
    }


}
getUserInfo();
console.log(userInfoStore.userinfo);

const handleCommand = (command)=>{
    if (command === 'logout') {
        //退出登录
        ElMessageBox.confirm(
            '你确认退出登录码？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                //用户点击了确认
                //清空pinia中的token和个人信息
                userInfoStore.info={}
                tokenstore.token=''
                //跳转到登录页
                ElMessage.success("成功退出登录")
                router.push('/login')
            })
            .catch(() => {
                //用户点击了取消
                ElMessage({
                    type: 'info',
                    message: '取消退出',
                })
            })
    } else {
        //路由
        router.push('/user/' + command)
    }
}
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu id="element" active-text-color="#2E8B57" background-color="#F5F5F5"  text-color="#363636"  
                router >
                <el-menu-item index="/path/manage" v-show="manageuser" style="font-weight: bold;">
                    <el-icon><Management /></el-icon>
                    <span>道路信息管理</span>
                </el-menu-item>
                <el-menu-item index="/path/check"  style="font-weight: bold;">
                    <el-icon><List /></el-icon>
                    <span>日常巡检和定期检查</span>
                </el-menu-item>
                <el-menu-item index="/person/schedul" v-show="manageuser" style="font-weight: bold;">
                    <el-icon><Checked /></el-icon>
                    <span>人员排班</span>
                </el-menu-item>
                <!-- <el-menu-item index="/check/result"  style="font-weight: bold;">
                    <el-icon><BellFilled /></el-icon>
                    <span>巡检结果记录中心</span>
                </el-menu-item> -->
                <el-sub-menu :index="'1'" v-show="manageuser">
                    <template #title>
                        <el-icon><BellFilled /></el-icon>
                        <span style="font-weight: bold;">巡检结果记录中心</span>
                    </template>
                    <el-menu-item index="/check/result1">
                        <el-icon><Document /></el-icon>
                        <span>日常巡查情况</span>
                    </el-menu-item>
                    <el-menu-item index="/check/result2">
                        <el-icon><Notebook /></el-icon>
                        <span>设施损害通知</span>
                    </el-menu-item>
                    <el-menu-item index="/check/result3">
                        <el-icon><Tickets /></el-icon>
                        <span>平整度检测</span>
                    </el-menu-item>
                    <el-menu-item index="/check/result4">
                        <el-icon><Memo /></el-icon>
                        <span>路面损害情况</span>
                    </el-menu-item>
                    <el-menu-item index="/check/result5">
                        <el-icon><Postcard /></el-icon>
                        <span>路面损害调查表</span>
                    </el-menu-item>
                </el-sub-menu>


                <el-menu-item index="/evaluate/center" v-show="manageuser" style="font-weight: bold;">
                    <el-icon><TrendCharts /></el-icon>
                    <span>评估中心</span>
                </el-menu-item>
                <el-menu-item index="/user/manage" v-show="manageuser" style="font-weight: bold;">
                    <el-icon><Promotion /></el-icon>
                    <span>系统用户管理</span>
                </el-menu-item>
                <el-menu-item index="/travel" style="font-weight: bold;">
                    <el-icon><LocationFilled /></el-icon>
                    <span>道路地图</span>
                </el-menu-item>
                <el-sub-menu :index="'2'">
                    <template #title>
                        <el-icon><UserFilled /></el-icon>
                        <span style="font-weight: bold;">个人中心</span>
                    </template>
                    <el-menu-item index="/user/info">
                        <el-icon><User /></el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/avatar">
                        <el-icon><Crop /></el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/resetPassword">
                        <el-icon><EditPen /></el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <h1>{{ admin }}<strong>{{ userInfoStore.userinfo.nickName }}</strong></h1>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="userInfoStore.userinfo.userPic ? userInfoStore.userinfo.userPic : avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>轻量级城镇道路养护信息管理系统 ©2024 Created by 计科曙光 2201 向鸿锐&肖鸿源&潭昌平&李嘉伟</el-footer>
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
.layout-container {
    height: 100vh;
    .el-aside {
        background-color:#F5F5F5;

        &__logo {
            height: 150px;
            background: url('@/assets/logo.jpg') no-repeat center / 110px auto;
        }
        .el-menu {
            border-right: none;
           
        }
        // overflow-x: hidden;
        // overflow-y: hidden; //禁用滚动条则不能滑动了
    }
    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-dropdown__box {
            display: flex;
            align-items: center;
            .el-icon {
                color: #999;
                margin-left: 10px;
            }
            &:active,
            &:focus {
                outline: none;
            }
        }
    }
    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}

</style>